import React ,{Component} from 'react';
import { 
    LoginWrap,
    ChangeTitle,
    SwitchContent,
    ErrorMag
}from './style.js'
import {Icon} from 'antd';
import { actionCreat } from './store/index';
import { connect } from 'react-redux';
import {withRouter} from "react-router-dom";

class Login extends Component {
    constructor(){
        super();
        this.state = {
           nameErrorMsg:'',
           phoneErrorMsg:'',
           passwordErrorMsg:'',
        }
        this.handleCheckValue.bind(this);
        this.handleChangeTitle.bind(this);
        this.handleSubmitLogin.bind(this);
    }

    render () {
        const { switchFlag ,totalUsers} = this.props;
        console.log(totalUsers.toJS())
        const { nameErrorMsg, phoneErrorMsg,passwordErrorMsg} = this.state;
        return (
            <div>
                <LoginWrap>
                    <ChangeTitle>
                        <span onClick={()=>{this.handleChangeTitle('login')}} className={switchFlag?'active':null}>登录</span>
                        <strong>&nbsp;&nbsp;  ~  &nbsp;&nbsp;</strong>
                        <span onClick={()=>{this.handleChangeTitle('register')}} className={!switchFlag?'active':null}>注册</span>
                    </ChangeTitle>
                    <div className="borderDiv"></div>
                    <SwitchContent>
                        {
                            switchFlag?
                            <div className="login">
                                <div className={nameErrorMsg?'error inptWrap':'inptWrap'}>
                                    <Icon type="apple" style={{ fontSize: 34, color: '#969696' }}/>
                                    <input type="text" placeholder="登录名" ref={(logininput) => {this.loginaccount = logininput}}/>
                                </div>
                                <ErrorMag>{nameErrorMsg}</ErrorMag>
                                <div className={passwordErrorMsg?'error inptWrap':'inptWrap'}>
                                    <Icon type="lock" style={{ fontSize: 34, color: '#969696' }} />
                                    <input type="password" placeholder="密码" ref={(logininput) => {this.loginpassword = logininput}}/>
                                </div>
                                <ErrorMag>{passwordErrorMsg}</ErrorMag>
                                <div className="inptWrap btnRwap">
                                    <button onClick={()=>{this.handleCheckValue(this.loginaccount.value,'',this.loginpassword.value,'')}}>登&nbsp;&nbsp;录</button>
                                </div>
                            </div>:<div className="register">
                                        <div  className={nameErrorMsg?'error inptWrap':'inptWrap'}>
                                            <Icon type="apple" style={{ fontSize: 34, color: '#969696' }}/>
                                            <input type="text" placeholder="登录名" ref={(input) => {this.account = input}}/>
                                        </div>
                                        <ErrorMag>{nameErrorMsg}</ErrorMag>
                                        <div className={phoneErrorMsg?'error inptWrap':'inptWrap'}>
                                            <Icon type="phone" style={{ fontSize: 34, color: '#969696' }} />
                                            <input type="text" placeholder="手机号" ref={(input) => {this.phoneNumber = input}}/>
                                        </div>
                                        <ErrorMag>{phoneErrorMsg}</ErrorMag>
                                        <div className={passwordErrorMsg?'error inptWrap':'inptWrap'}>
                                            <Icon type="lock" style={{ fontSize: 34, color: '#969696' }} />
                                            <input type="password" placeholder="密码" ref={(input) => {this.password = input}}/>
                                        </div>
                                        <ErrorMag>{passwordErrorMsg}</ErrorMag>
                                        <div className="inptWrap btnRwap">
                                            <button onClick={()=>{this.handleCheckValue(this.account.value,this.phoneNumber.value,this.password.value,'register')}}>注&nbsp;&nbsp;册</button>
                                    </div>
                            </div>
                        }
                        
                        
                        
                    </SwitchContent>
                </LoginWrap>
            </div>
        )
    }
    handleCheckValue(name,phone,pass,tag){
      
        let passThrough  = true;
        if(!name){
            passThrough = false;
            this.setState({
                nameErrorMsg:'用户名没有填先写!'
            })
        }else{
            this.setState({ 
                nameErrorMsg:''
            })
        }
        if(!phone && tag){
            passThrough = false;
            this.setState({
                phoneErrorMsg:'手机号没有填写!'
            });
        }
        if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone)) && tag){
            passThrough = false;
            this.setState({
                phoneErrorMsg:'手机号不正确!'
            })
        }else{
            this.setState({
                phoneErrorMsg:''
            }) 
        }
        if(!pass){
            passThrough = false;
            this.setState({
                passwordErrorMsg:'密码没有填写!'
            })
        }else{
            this.setState({
                passwordErrorMsg:''
            })
        };
        if(passThrough){

            tag && this.props.handleSubmitRegidter(name,phone,pass);
            !tag && this.handleSubmitLogin(name,pass);

        }
    }
    handleSubmitLogin(name,pass){
          let users = this.props.totalUsers;
          let newUsers = users.toJS();
          for (let index = 0; index < newUsers.length; index++) {
              const element = newUsers[index].name;
              if(element === name){
                localStorage.username = name;
                localStorage.userpass = pass;
                this.props.history.push("/");
              }
          }
    }
    handleChangeTitle(tag){
        this.setState({
            nameErrorMsg:'',
           phoneErrorMsg:'',
           passwordErrorMsg:'',
        });
        this.props.handleChangeTitle(tag)
    }
   
};

const mapStateToProps = (state)=>{
    return {
        switchFlag:state.getIn(['login','switchFlag']),
        totalUsers:state.getIn(['login','totalUsers'])
    }
}
const mapDispathToProps = (dispath)=>{
    return {
        handleChangeTitle(tag){
            switch (tag) {
                case 'login':
                   dispath(actionCreat.handleChangeTitle(true));
                    break;
                case 'register':
                    dispath(actionCreat.handleChangeTitle(false));
                    break;
                default:
                    break;
            }
        },
        handleSubmitRegidter(name,phone,pass){
            let dataUser = {
                name,
                phone,
                pass
            }
            dispath(actionCreat.addUsers(dataUser))
        }
    }
}

export default connect(mapStateToProps,mapDispathToProps)(withRouter(Login));